<!-- 收藏按钮 -->
<template>
  <div class="collect-box">
    <a-button
      :title="collectImgStatus ? '取消收藏' : '收藏'"
      type="text"
      class="collect-button icon-only-btn"
      :class="[showDefaultText && 'button-padding', collectImg === LINE_IMG && 'line-img']"
      @click.stop="modifyCollectImg"
      @mouseover="handleMouseOver"
      @mouseleave="handleMouseLeave"
    >
      <span :class="collectImg + ' ' + 'collect-img iconfont'"></span>
      <span v-if="showDefaultText" class="collect-text">
        {{ collectImgStatus ? collectActiveText : collectCancelText }}
      </span>
    </a-button>
  </div>
  <cancel-favorite-message v-model:show="showDisableModal" :loading="loading" :msg="msg" ok-text="确认" @ok="disableClient" />
</template>

<script lang="ts" setup>
  import { ButtonType } from 'ant-design-vue/es/button'
  import { debounce } from 'g6-fn'
  import { onMounted, onUnmounted, ref, watch } from 'vue'
  import { useRequest } from 'vue-request'

  import { adminCollectionApi } from '@/services/api'

  import CancelFavoriteMessage from '../CancelFavoriteMessage/index.vue'

  interface Props {
    defaultStatus: boolean
    showDefaultText?: boolean
    collectActiveText?: string
    collectCancelText?: string
    btnType?: ButtonType
    msg?: string
    favoriteObjType?: number //1:课程，2：项目案例，3：数据集，4：模型
    favoriteObjName?: string //收藏对象名称
    favoriteObjId?: string //收藏对象id
  }

  let props = withDefaults(defineProps<Props>(), {
    defaultStatus: false,
    showDefaultText: true,
    collectActiveText: '已收藏',
    collectCancelText: '收藏',
    btnType: 'text',
    msg: '是否取消收藏',
    favoriteObjType: 1,
    favoriteObjName: '',
    favoriteObjId: ''
  })

  let emits = defineEmits(['onClick', 'clickOk'])

  // 声明两个常量用于颜色改变
  const LINE_IMG = 'icon-star-fill'
  const CANCEL_IMG = 'icon-star-line'

  let collectImg = ref<string>(props.defaultStatus ? LINE_IMG : CANCEL_IMG)
  let collectImgStatus = ref<boolean>(props.defaultStatus)

  const shopWatch = watch(
    () => props.defaultStatus,
    (val: boolean) => {
      collectImgStatus.value = val
      collectImg.value = collectImgStatus.value ? LINE_IMG : CANCEL_IMG
    }
  )

  onMounted(() => {
    collectImgStatus.value = props.defaultStatus
    collectImg.value = props.defaultStatus ? LINE_IMG : CANCEL_IMG
  })
  onUnmounted(() => {
    shopWatch()
  })
  //改变收藏状态
  const { loading, runAsync: changeFavoriteRun } = useRequest<ResponseData<any>>(adminCollectionApi.changeFavoriteStatus, {
    onSuccess: ({ data, code }) => {
      console.log(code, 'changeFavoriteRun')
      if (code === 'SYSTEM-100000') {
        collectImgStatus.value = data.status
        collectImg.value = collectImgStatus.value ? LINE_IMG : CANCEL_IMG
      }
    }
  })
  // 点击图标或者文字时
  const modifyCollectImg = async () => {
    let params = {
      favoriteType: props.favoriteObjType,
      objectName: props.favoriteObjName,
      objectId: props.favoriteObjId,
      isFavorite: !collectImgStatus.value
    }

    if (collectImgStatus.value) {
      showDisableModal.value = true
    } else {
      await changeFavoriteRun(params, { isAddUid: true })
    }

    emits('onClick', collectImgStatus.value)
  }
  const handleMouseOver = () => {
    // collectImg.value = LINE_IMG
  }
  const handleMouseLeave = () => {
    if (!collectImgStatus.value) {
      collectImg.value = CANCEL_IMG
    }
  }
  const showDisableModal = ref(false)
  const disableClient = debounce(async () => {
    // collectImgStatus.value = false
    // collectImg.value = collectImgStatus.value ? LINE_IMG : CANCEL_IMG
    let params = {
      favoriteType: props.favoriteObjType,
      objectName: props.favoriteObjName,
      objectId: props.favoriteObjId,
      isFavorite: !collectImgStatus.value
    }
    await changeFavoriteRun(params, { isAddUid: true })
    showDisableModal.value = false
    emits('clickOk', collectImgStatus.value)
  }, 500)
</script>
<style lang="less" scoped>
  .collect-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
    gap: 6px;
    cursor: pointer;

    .collect-text {
      margin-left: 6px;
      font-size: 14px;
      text-align: center;
      color: rgba(21, 23, 27, 0.95);
      font-weight: 400;
      line-height: 22px;
    }

    .button-padding {
      padding: 7px 16px;
      background: @background5;
      border: 1px solid transparent;
      box-shadow: transparent;
    }

    .collect-button {
      color: rgba(17, 22, 31, 0.52);
      background: @background1;
      border: 1px solid @border2;
      box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);

      &:hover {
        background-color: #f2f3f5;
      }
      // border: 1px solid @border2;
      // border-radius: 6px;
      // box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
    }

    .line-img {
      border: none;
      box-shadow: none;
    }

    .collect-img {
      width: 18px;
      height: 18px;
      font-size: 18px;
    }

    .icon-star-line {
      color: #000;
    }

    .icon-star-fill {
      color: rgba(245, 151, 0, 1);
    }

    .line_class {
      width: 16px;
      height: 16px;
      background-color: black !important;
    }

    .lock_class {
      width: 16px;
      height: 16px;
      background-color: blue !important;
    }
  }
</style>
